<!-- 帖子 详情页  组件  -->
<template>
	<view>
		<!-- 帖子 详情页 详细信息 -->
		<commonList
			:item="info"
			isdetail
			@follow="follow"
			@doSupport="doSupport"
			@doComment="doComment"
			@doShare="doShare"
		>
			<view> {{ info.content }}</view>
			<view>
				<image
					v-for="(item, index) in images"
					:key="index"
					:src="item.url"
					class="w-100"
					mode="widthFix"
					@error="imageUrlError"
					@click="preview(index)"
				></image>
			</view>
		</commonList>
		<!-- 评论列表 -->
		<view class="p-2 font-md font-weight-bold">
			最新评论 <text v-if="info.comment_count > 0" class="ml-1"> {{ common_list.length }}</text>
			<text v-else class="font text-secondary ml-1">暂无评论</text>
		</view>
		<!-- 评论列表 -->
		<view class="px-2">
			<view class="uni-comment-list" v-for="(item, index) in common_list" :key="index" @click="">
				<view v-if="item.fid" style="width: 60rpx;"></view>
				<view class="flex w-100" :class="item.fid ? 'bg-light rounded p-2' : ''">      
					<!-- 头像 -->
					<view class="uni-comment-face pl-1">
					<image style="height: 70rpx;" @error="imageError" :src="item.userpic"></image>
						</view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<!-- 名称 -->
							<text>{{ item.username }}</text>
						</view>
						<!-- 评论内容 -->
						<view class="uni-comment-content" @click="reply(item.id)">{{ item.data }}</view>
						<view class="uni-comment-date">
							<!-- 评论时间 -->
							<view>{{ item.time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位 页面才能显示全-->
		<view style="height: 100rpx;"></view>
		<!-- 底部 聊天条 -->
		<chatSend :focus="focus" @blur="blur" @chatSubmit="chatSubmit"></chatSend>
		<!-- 底部弹出层 组件引入-->
		<moreShare ref="share"></moreShare>
	</view>
</template>

<script>
	// 引入 帖子列表 组件
	import commonList from '@/components/common/common-list.vue';
	// 引入底部 输入框 ，发送按钮 组件
	import chatSend from '@/components/user-chat/chat-send.vue';
	// 引入 分享 弹出层组件
	import moreShare from '@/components/common/more-share.vue';
	// 引入 时间戳转换工具
	import $T from '@/common/time.js';
import { log } from 'util';
	export default {
		components: {
			commonList,
			chatSend,
			moreShare,
		},
		data() {
			return {
				// 当前帖子信息
				info: {
					id: 0, // 此条数据id
					user_id: 0, // 用户ID
					username: '昵称', // 昵称
					userpic: '', // 昵称图片
					newstime: 0, // 发布时间
					isFollow: false, // 是否关注
					title: '', // 标题
					titlepic: '', // 标题图片
					// 点赞 或 踩 (用户只能顶一次或踩一次)
					support: {
						// 点赞 是 support
						type: 'support',
						support_count: 0, // 点赞
						unsupport_count: 0, // 踩
					},
					comment_count: 0, // 评论数量
					share_num: 0, // 分享数量
					content: '', // 详情内容
				},
				images: [], // 当前帖子 详情图片
				common_list: [], // 评论列表 数据
				focus: false, // 是否自动聚焦
				reply_id: 0, // 回复的用户 id
			};
		},
		// 监听 页面加载时 ----------------------------------------------
		onLoad(e) {
			//  e 接收到 首页进入的 路由传参
			if (e.delist) {
				// 初始化操作
				this.Init(JSON.parse(e.delist));
			}
			console.log(JSON.parse(e.delist));
			// 监听common-list组件 关注和顶踩
			uni.$on('updateFollSupport', (e) => {
				switch (e.type) {
					case 'follow': // 关注
						this.follow(e.data.user_id);
						break;
					case 'support': // 顶踩 操作
						this.doSupport(e.data);
						break;
				}
			});
		},
		// 页面卸载 时
		onUnload() {
			// 清除 监听事件
			uni.$off('updateFollSupport', (e) => {});
		},
		// 监听原生标题栏 ，点击事件 --------------------------------------
		onNavigationBarButtonTap() {
			// 打开弹出层 (more-share通过open事件接收)
			this.$refs.share.open({
				title: this.info.title, // 分享标题
				shareText: this.info.title, //分享内容
				href: 'http://t.csdn.cn/C2rzS', // 分享的连接
				image: this.info.titlepic, // 封面图
			});
		},
		//  监听页面返回
		onBackPress() {
			// 关闭弹出层
			this.$refs.share.close();
		},
		// #ifndef APP-PLUS
		// 微信小程序分享
		onShareAppMessage(res) {
			return {
				title: this.info.title,
				// 路径必须对应当前页面 ，可查看 common-list组件，和他路径要一致
				path: '/pages/detail/detail?detail=' + JSON.stringify(this.info),
			};
		},
		// #endif
		// 计算属性 ----------------------------------------------------
		computed: {
			// 图片预览需要使用
			imagesList() {
				// 返回 帖子信息内,单张图片
				return this.images.map((item) => item.url);
			},
		},
		// 存放所有事件
		methods: {
			// 监听图片加载失败
			imageError(){
				this.common_list.forEach(v=>{
					v.userpic = '/static/default.jpg'
			     	// console.log('图片加载失败',v);
				})
			},
			imageUrlError(){
			   let url = '/static/bgimg/banner2.jpg'
			   this.images.forEach(v=>{
				   v.url='/static/bgimg/banner2.jpg'
			   })
			    console.log('图片加载失败',this.images);	
			},
			// 初始化操作
			Init(data) {
				// 动态设置当前页面标题
				uni.setNavigationBarTitle({
					title: data.title,
				});
				// 请求api
				this.info = data; // 赋值自定义的数组，将数据详情赋值进去
				this.info.content = ''; // 内容为空
				this.$H.get('/post/' + this.info.id).then((res) => {
					this.info.content = res.detail.content; // 内容为空
					this.images = res.detail.images; // 详情图片为空
				});
				// 获取评论列表
				this.getComments();
			},
			// 关注 -------------------------------------------------
			// 使用自定义事件 follow 关注
			follow(user_id) {
				/* 找到 当前帖子的 列表数据 */
				// 当前点击的用户下的 isFollow (改为true，隐藏关注)
				if (this.info.user_id === user_id) {
					this.info.isFollow = !this.info.isFollow;
				}
			},
			// 顶踩操作
			doSupport(e) {
				// 1. 根据 子组件发布的索引值，查询到 此条数据的 type判断 赞，踩操作
				let thiSupport = this.info.support;
				// 已经 点过赞，再点一次，终止
				if (thiSupport.type === e.type) {
					return uni.showToast({
						title: '你已经操作过了',
						icon: 'none',
						duration: 800,
					});
				}
				// 声明 消息提示 信息
				let msg = e.type === 'support' ? '点赞成功' : '踩一脚';
				// 判断之前是否已经 赞 或踩 (之前没有点赞 也没有 踩)
				if (thiSupport.type === '') {
					/* 4. 点击当前 赞 或 踩 数量+1
					 * 子组件通过 support 判断样式添加，这里需要拼接子组件发布的type值，点击哪一个就让 此 +1 */
					thiSupport[e.type + '_count']++;
				} else if (thiSupport.type === 'support' && e.type === 'unsupport') {
					// 如果之前 赞了（判断原数据是赞的，并且 现在点击了 踩）
					// 赞 -1
					thiSupport.support_count--;
					// 踩 +1
					thiSupport.unsupport_count++;
				} else if (thiSupport.type === 'unsupport' && e.type === 'support') {
					// 如果之前 踩了（判断原数据是踩的，并且 现在点击了 赞）
					// 赞 +1
					thiSupport.support_count++;
					// 踩 -1
					thiSupport.unsupport_count--;
				}
				/* 2. 赋值给，子组件发布的type（赞 或踩）
				   3. 子组件 通过type 判断 添加样式 或 事件 */
				thiSupport.type = e.type;
				uni.showToast({ title: msg, duration: 500, icon: 'none' });
			},
			// 图片预览
			preview(index) {
				// 预览图片
				uni.previewImage({
					current: index,
					urls: this.imagesList,
				});
			},
			// 提交评论
			chatSubmit(data) {
				if (data === '') {
					return uni.showToast({
						title: '评论不能为空',
						icon: 'none',
					});
				}
				// 显示 loading 提示框
				uni.showLoading({
					title: '评论中...',
					mask: false,
				});
				this.$H
					.post(
						'/post/comment',
						{
							fid: this.reply_id, // 回复的id，0代表一级评论
							data: data, // 内容
							post_id: this.info.id, // 文章id
						},
						{ token: true },
					)
					.then((res) => {
						uni.hideLoading();
						// 重新获取评论列表
						this.getComments();
					})
					.catch((err) => {
						uni.hideLoading();
					});
			},
			// 获取评论列表
			getComments() {
				this.$H.get('/post/' + this.info.id + '/comment').then((res) => {
					// 赋值 评论列表数据，调用格式转换
					this.common_list = this.__ArrSort(res.list);
					//动态修改 ，最新评论值
					this.info.comment_count = this.common_list.length;
					// 通知首页。监听 最新评论数
					uni.$emit('updateComments', {
						id: this.info.id, // 此条 详情列表数据的id
						count: this.info.comment_count, // 最新评论数
					});
				});
			},
			// 重新整理评论格式
			__ArrSort(arr, id = 0) {
				var temp = [],
					lev = 0;
				var forFn = function(arr, id, lev) {
					for (var i = 0; i < arr.length; i++) {
						var item = arr[i];
						if (item.fid == id) {
							item.lev = lev;
							temp.push({
								id: item.id,
								fid: item.fid,
								userid: item.user.id,
								userpic: item.user.userpic,
								username: item.user.username,
								time: $T.gettime(item.create_time),
								data: item.data,
							});
							forFn(arr, item.id, lev + 1);
						}
					}
				};
				forFn(arr, id, lev);
				return temp;
			},
			doComment() {},
			// 回复评论
			reply(id) {
				this.reply_id = id; // 记录回复用户 的 id
				this.focus = true;
			},
			// 输入框失去焦点
			blur() {
				this.reply_id = 0; // 恢复默认id
				this.focus = false; //失去 焦点
			},
			// 点击分享
			doShare() {},
		},
	};
</script>

<style lang="scss"></style>
